<script setup>
import { reactive, ref, watch } from 'vue';

const money = ref(10000)
const add = () => {
    money.value += 1000
}

const count = ref(0)
const addCount = () => {
    count.value += 1000
}

const obj = ref({
    name: 'zs', age: 20
})
const addAge = () => {
    obj.value.age++
}

// 1. 监听单个属性(常见)
// 语法 第一个参数，是要监听的数据源
// 第二个参数，是数据源改变之后会触发的函数
// 两个参数，第一个代表改变后的值，第二个是改变前的值
// watch(money, (val, oldVal) => {
//     console.log('现在的工资', val);
//     console.log('原来的工资', oldVal);
// })

// 2 .通过数组方式，传递多个数据源,实现监控(了解即可)
// watch([money, count], (val, oldVal) => {
//     console.log('现在的数据', val);
//     console.log('原来的数据', oldVal);
// })

// 3. 通过 第三个参数 {deep:true},可以深度监听 ref 绑定的对象
// watch(obj, (val, oldVal) => {
//     console.log('obj', val);
// }, { deep: true, immediate: true })

// 4. 监听对象的某一个属性,直接写 obj.value.age ，等于 拿到的是静态的数据
// 需要使用 vue3 的固定写法，通过 () => obj.value.age 返回即可
watch(() => obj.value.age, (val, oldVal) => {
    console.log('obj', val);
})
</script>

<template>
    <div>{{ money }}</div>
    <button @click="add">点我加工资</button>
    <button @click="addCount">点我加次数</button>
    <hr>

    <div>{{ obj }}</div>
    <button @click="addAge">点我加年龄</button>
</template>